<template>
  <div>
    按日统计日期:
    <el-date-picker
      type="date"
      value-format="yyyy-MM-dd"
      placeholder="请选择日期"
      v-model="startTime"
      style="width:180px;"
    ></el-date-picker>至
    <el-date-picker
      type="date"
      value-format="yyyy-MM-dd"
      placeholder="请选择日期"
      v-model="endTime"
      style="width:180px;"
    ></el-date-picker>
    <el-button type="infor" size="medium" @click="getList()">查 询</el-button>
    <div id="pieReport" style="width: 400px;height: 300px;"></div>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column fixed prop="saleDate" label="日期" width="410"></el-table-column>
      <el-table-column prop="amountPaid" label="销售金额" width="410"></el-table-column>
      <el-table-column prop="chengben" label="成本金额" width="410"></el-table-column>
      <el-table-column prop="yinli" label="盈利金额" width="410"></el-table-column>
    </el-table>
  </div>
</template>

<script>
import axios from "axios";
export default {
  methods: {
    getList() {
      var $this = this;
      this.axios({
        method: "post",
        url: "http://localhost:9999/biz/tSaleList/getDayList",
        params: {
           startTime: this.startTime,
           endTime: this.endTime,
           access_token: localStorage.getItem("access_token")
        }
      }).then(function(res) {
        $this.tableData = res.data.obj;
      });
    },
    drawPie(id) {
      this.charts = this.$echarts.init(document.getElementById(id));
      this.charts.setOption({
        tooltip: {
          trigger: "item",
          formatter: "{a}<br/>{b}:{c} ({d}%)"
        },
        legend: {
          bottom: 10,
          left: "center",
          data: this.opinion
        },
        series: [
          {
            name: "状态",
            type: "pie",
            radius: "65%",
            center: ["50%", "50%"],
            avoidLabelOverlap: false,
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              },
              color: function(params) {
                //自定义颜色
                var colorList = ["#1ab394", "#79d2c0"];
                return colorList[params.dataIndex];
              }
            },
            data: this.opinionData
          }
        ]
      });
    },
  },
  data() {
    return {
      tableData: [],
      startTime: "",
      endTime : "",
      charts: "",
      opinion: ["销售金额","成本金额","盈利金额"],
      opinionData:[
        {
          value: 9,
          name: "销售金额",
          itemStyle: "#1ab394"
        },
        { value: 9, name: "成本金额", itemStyle: "#79d2c0" }
      ]
    };
  },
  mounted() {
   this.getList();
   this.$nextTick(function() {
      this.drawPie("pieReport");
    });
  }
};
</script>
